<!DOCTYPE html>
<html lang="en">
<!--
See https://github.com/AnalyticalGraphicsInc/cesium-google-earth-examples/blob/master/LICENSE.md

Original Work:

Copyright 2009 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.


-->
<head>
    <title>Cesium API Sample - Fetch Good KML</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="static/codemirror.css">
    <link rel="stylesheet" href="static/bootstrap-3.3.2-dist/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.3.2-dist/css/bootstrap.cerylean.min.css">
    <link rel="stylesheet" href="static/examples.css">
    <script src="static/codemirror-compressed.js"></script>
    <script src="static/helpers.js"></script>
    <script src="../Cesium/Cesium.js"></script>
    <script src="static/jquery-2.1.3.min.js"></script>
    <script src="static/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</head>

<body onresize="onResize()">
<header class="container">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button class="btn btn-primary navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
            </button>
            <a class="navbar-brand" href="http://cesiumjs.org" target="_blank"><img src="static/Cesium_Logo_forDarkBackground.png" /></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#" id="menuPreview" onclick="showPanel(this)">Show Preview</a></li>
                <li><a href="#" id="menuCesium" onclick="showPanel(this)">Show Cesium Code</a></li>
                <li><a href="#" id="menuGoogle" onclick="showPanel(this)">Show Google Earth Code</a></li>
                <li><a href="http://cesiumjs.org/for-google-earth-developers.html" target="_blank">For Google Earth Developers</a></li>
                <li><a href="../index.html" target="_blank">All Google Earth examples</a></li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Additional Resources <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://cesiumjs.org/tutorials.html" target="_blank">Tutorials</a></li>
                        <li><a href="http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html" target="_blank">Cesium Sandcastle</a></li>
                        <li> <a href="http://cesiumjs.org/refdoc.html" target="_blank">Reference Documentation</a> </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</header>
<div id="preview">
    <div id="previewContent">
        <div id="cesiumContainer"></div>
    </div>
</div>
<div id="code">
    <div class="panel panel-primary" id="czmPanel">
        <div class="panel-heading">Relevant Cesium Source</div>
        <div class="panel-body">
            <textarea id="cesiumSource"></textarea>
        </div>
    </div>
    <div class="panel panel-primary" id="gePanel">
        <div class="panel-heading">Relevant Google Earth Source (<a target="_blank" href="https://code.google.com/p/earth-api-samples/source/browse/trunk/examples/kml-fetch-good.html">link</a>)</div>
        <div class="panel-body">
                <textarea id="gesource">
                    function finished(object) {
                      if (!object) {
                        // wrap alerts in API callbacks and event handlers
                        // in a setTimeout to prevent deadlock in some browsers
                        setTimeout(function() {
                          alert('Bad or null KML.');
                        }, 0);
                        return;
                      }
                      ge.getFeatures().appendChild(object);
                      var la = ge.createLookAt('');
                      la.set(37.77976, -122.418307, 25, ge.ALTITUDE_RELATIVE_TO_GROUND,
                             180, 60, 500);
                      ge.getView().setAbstractView(la);
                    }

                    // fetch the KML
                    var url = 'http://sketchup.google.com/3dwarehouse/' +
                        'download?mid=28b27372e2016cca82bddec656c63017&rtyp=k2';
                    google.earth.fetchKml(ge, url, finished);
                </textarea>
        </div>
    </div>
</div>
<script>
	Cesium.BingMapsApi.defaultKey = 'AgH8JB-gA1Wo9ZbGL9oCEqfD-4YAkMnMp_XzzoGbynt_CC6l27GFWqN8SJaYm6aC';
    var viewer = new Cesium.Viewer('cesiumContainer', {
        fullscreenElement: 'previewContent',
        selectionIndicator: false,
        infoBox: false
    });

    function relevantSource() {
        viewer.dataSources.add(Cesium.KmlDataSource
            .load('../sampleData/kml/MaineScubaDiving.kml', {
                camera: viewer.camera,
                canvas: viewer.canvas
            })
        )
        .then( function (dataSource) {
            viewer.flyTo(dataSource.entities);
        });
    }
    relevantSource();
    showSource('cesiumSource', relevantSource);
</script>
</body>
</html>
